<template>
  <ul class="am-pagination tpl-pagination" v-if="total != 0 ">
    <li v-if="isShowTotal" style="font-size: 14px;color: #333">共&nbsp;{{total}}&nbsp;条</li>
    <li v-if="isShowPageSize">
      <el-select style="width: 106px" size="small" v-model="currentPageSize">
        <el-option :value="10" label="10 条/页"></el-option>
        <el-option :value="20" label="20 条/页"></el-option>
        <el-option :value="50" label="50 条/页"></el-option>
        <el-option :value="100" label="100 条/页"></el-option>
        <el-option :value="200" label="200 条/页"></el-option>
      </el-select>
    </li>
    <li v-if="showLeftMore"><a href="javascript:;" @click="$emit('paging' , showPages[0] - 1 )">...</a></li>
    <li v-for="n in showPages" :key="n" :class="n==pageNo ? 'am-active' :''"><a href="javascript:;" @click="$emit('paging' , n )" class="">{{n}}</a></li>
    <li v-if="showRightMore"><a href="javascript:;" @click="$emit('paging' , showPages[showPages.length - 1] + 1 )">...</a></li>
  </ul>
</template>
<style scoped>

</style>
<script>
    export default{
      name : 'pagination',
        props:{
          total: {
            default: 0
          },
          pageNo: {
            default: 1
          },
          pageSize: {
            default: 10
          },
          isShowTotal: {
            type: Boolean,
            default: true
          },
          isShowPageSize: {
            type: Boolean,
            default: false
          }
        },
        data:function(){
          return {
            totalPage : 10,
            currentPageSize : this.pageSize || 10,
            showPages : [] ,
            showLeftMore : false,
            showRightMore : false
          }
        },
        watch:{
          total:function () {
             this.change()
          },
          pageNo:function () {
            this.change()
          },
          currentPageSize: function (val) {
            this.change()
            this.$emit('pageSizeChange' , val)
            this.$emit('paging' , 1)
          }
        },
        created:function(){
            if(this.total > 0 ){
                this.change()
            }
        },
        methods:{
          change:function(){
            this.totalPage = parseInt( this.total / this.currentPageSize ) ;
            if(this.total % this.pageSize != 0 ){
              this.totalPage++
            }

            var maxShow  = Math.min(10,this.totalPage )

            var sp  = []
            var s = parseInt( ( this.pageNo - 1 ) / maxShow ) * maxShow + 1
            var e = Math.min( s + maxShow , this.totalPage + 1 )
            for(var i  = s  ;i < e ; i++ ){
              sp.push(i)
            }

            this.showPages = sp
            this.showLeftMore = this.pageNo > maxShow
            this.showRightMore = this.pageNo <= parseInt( ( this.totalPage -1 ) / maxShow ) * maxShow
          }
        }

    }
</script>
<style lang="less">
  .tpl-pagination {
    .el-select {
      input {
        height: 33px!important;
        margin-bottom: 7px;
      }
    }
  }
</style>
